<table id="records" class="editedRecord">
    <thead>
    </thead>
    <tbody>
    </tbody>
</table>

<!-- some variable -->
<script type="text/javascript">
var readUrlEdit    = "<?=base_url()?>index.php/act_outlets/read/edit",
    updateUrlEdit  = "<?=base_url()?>index.php/outlet/outlets/update",
    delUrlEdit     = "<?=base_url()?>index.php/act_outlets/delete/primer",
    approveUrlEdit = "<?=base_url()?>index.php/outlet/outlets/approve",
    rejectUrlEdit  = "<?=base_url()?>index.php/act_outlets/delete/temp",
    delHref,
    updateHref,
    updateId;

$( document ).ready( function() {
    
   readEditedRegistered(); //panggil fungsi readOutletsRegistered


}); //end document ready

function readEditedRegistered()
{
    
    $('.editedRecord').dataTable({
                "bJQueryUI": true, // aktifkan tampilan tabel JQueryUI
                "sAjaxSource": readUrlEdit, //data source
                "sAjaxDataProp": "aaData", //variabel yg menampung data table
                "bServerSide": true, //serverside processing true
                "bProcessing": true, // tampilkan 'processing...' status saat data dipanggil
                //"sPaginationType": 'fullNumbers',
                "bPaginate": true,
                "aoColumns":[ //tentukan kolom pd tabel yg akan menampung value dari server
                    {"mDataProp": "outlet_id", "sTitle": "Outlet ID"}, 
                    {"mDataProp": "outlet_name", "sTitle": "Outlet Name"}, 
                    {"mDataProp": "Address", "sTitle": "Address"},
                    {"mDataProp": "user_name", "sTitle": "Maintained By"}, 
                    {"mDataProp": "image_path", "sTitle": "Image"}
                    // {"sTitle": "Action"} 
                ],
                "fnRowCallback": function(nRow, aaData, iDisplayIndex, iDisplayIndexFull) 
                {
                    // $(nRow).find('td').eq(-1).after('<a href="'+updateUrlEdit+'/'+aaData[0]+'">View</a>  | <a href="'+approveUrlEdit+'/'+aaData[0]+'">Approve</a>'); //buat link action 
                    $(nRow).find('td').eq(0).before('<td>'+(parseInt(iDisplayIndex,10)+1+parseInt(dis))+'</td>'); //20120719 ayu
                    $(nRow).find('td').eq(-1).after('<?=$menu["edit"]?>');

                        var linkEditView = $(nRow).find('.viewBtnEdit').attr("href")+aaData[0];
                        var linkEditEdit = $(nRow).find('.updateBtnEdit').attr("href")+aaData[0];
                        var linkEditAprv = $(nRow).find('.approveBtnEdit').attr("href")+aaData[0];
                        var linkEditRjct = $(nRow).find('.rejectBtnEdit').attr("href")+aaData[0];

                        $(nRow).find('.viewBtnEdit').attr("href",linkEditView);
                        $(nRow).find('.updateBtnEdit').attr("href",linkEditEdit);
                        $(nRow).find('.approveBtnEdit').attr("href",linkEditAprv);
                        $(nRow).find('.rejectBtnEdit').attr("href",linkEditRjct);

                    /*$(nRow).find('td').eq(3).each(function(){
                        $(this).html('<a href="<?=base_url();?>'+aaData[3]+'" target="_blank">click to see the image</a>');
                    });*/
                    $(nRow).find('td').eq(5).each(function(){   //20120719 ayu
                        $(this).html('<a href="<?=base_url();?>'+aaData[4]+'" target="_blank">click to see the image</a>');
                    });

                    $.ajax({
                        url: "<?=base_url();?>index.php/act_outlets/defoger",
                        type: "POST",
                        data: {'str' : aaData[0]},
                        success: function(response) {
                            /*$(nRow).find('td').eq(0).replaceWith(response);*/
                            $(nRow).find('td').eq(1).replaceWith(response); //20120719 ayu
                        }
                    });

                    return nRow;
                }, //20120719 ayu
                
                "fnServerData": function ( sSource, aoData, fnCallback ) { 
                    $.getJSON( sSource, aoData, function (json) { 
                                
                    dis=json['iDisplayStart'];
                    fnCallback(json);
                });}  
    });
    
    $('.editedRecord thead tr').find('th').eq(0).before('<th class="ui-state-default">No</th>'); //20120719 ayu
    $('.editedRecord thead tr').find('th').eq(-1).after('<th class="ui-state-default" width="200px">Action</th>');

}


</script>